<template>
    <div>
        <el-card class="box-card" shadow="hover">
            <!-- 搜索表单-->
            <el-form :model="queryParams" ref="queryForm" :inline="true">
                <el-form-item>
                    <el-button 
                    icon="el-icon-plus" 
                    size="mini" 
                    type="primary"
                    @click="dialogTitle = '新增广告'
                    ,dialogVisible = true
                    ,form = {}
                    ,img = false">
                    新增广告
                    </el-button>
                </el-form-item>
            </el-form>
            <el-table
            :data="tableData"
            stripe
            style="width: 100%">
                <el-table-column
                prop="id"
                label="id"
                align="center">
                </el-table-column>
                <el-table-column
                prop="url"
                label="图片"
                align="center">
                    <template slot-scope="scope">
                        <img v-if="scope.row.url" :src="scope.row.url" class="url">
                    </template>
                </el-table-column>
                <el-table-column
                prop="createDate"
                label="添加日期"
                width="100px"
                align="center">
                </el-table-column>
                <el-table-column
                prop="facilityCode"
                label="设备编号"
                align="center">
                </el-table-column>
                <el-table-column
                fixed="right"
                width="100"
                prop="address"
                align="center"
                label="操作">
                    <template slot-scope="scope">
                        <i class="el-icon-edit" style="font-size: 12px;color: #409EFF;cursor:pointer;" @click="updateAD(scope.row.id)">编辑</i>
                        <i class="el-icon-delete" style="font-size: 12px;color: #F56C6C;cursor:pointer;" @click="remove(scope.row.id)">删除</i>
                    </template>
                </el-table-column>
            </el-table>
             <!--分页栏-->
            <el-pagination
                background
                align="center"
                @size-change="handleSizeChange($event,111)"
                @current-change="Inquire()"
                :current-page.sync="currentPage"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </el-card>
        <!--添加广告-->
        <el-dialog
        title="添加广告"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose">
        <el-form ref="form" :model="form" label-width="100px">
            <el-form-item label="图片">
                <el-upload
                class="ad-uploader"
                :action="uploadUrl"
                :headers="headers"
                :show-file-list="false"
                :on-success="handleadSuccess"
                :before-upload="beforeadUpload">
                    <img v-if="img" :src="form.url" class="ad">
                    <i v-else class="el-icon-plus ad-uploader-icon"></i>
                </el-upload>
            </el-form-item>
            <el-form-item label="设备编号">
                <el-input v-model="form.facilityCode"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="submmit()">确 定</el-button>
        </span>
        </el-dialog>
     
    </div>
</template>
<script>
import { list,add,del,update,ad } from '@/api/app_pages/ad'
import { getToken } from '@/utils/auth'
export default {

    components:{

    },
    data(){
        return {
            queryParams:{},
            size: 20,
            currentPage: 1,
            total: 0,
            tableData: [],
            dialogVisible: false,
            form:{},
            uploadUrl: process.env.VUE_APP_BASE_API + "/common/upload",
            headers: {
                Authorization: 'Bearer ' + getToken()
            },
            img: false,
            dialogTitle: ''
        }
    },
    created(){
        this.data()  
    },
    methods:{
        data(){
            list(this.size,this.currentPage).then(res => {
                this.tableData = res.rows
                this.total = parseInt(res.total)
            })
        },
        handleClose(done) {
            this.$confirm('确认关闭？')
            .then(_ => {
                done();
            })
            .catch(_ => {});
        },
        handleadSuccess(res, file) {
            this.form.url = res.fileName
            this.img = true
        },
        beforeadUpload(file) {
            const isImg = file.type.indexOf("image/") == 0;
            if (!isImg) {
                this.$message.error('图片格式不正确!');
            }
            return isImg;
        },
        updateAD(id){
            this.dialogTitle = '编辑广告'
            this.dialogVisible = true
            this.form.id = parseInt(id);  
                ad(this.form.id).then(res => {
                    this.form = res.data 
                    this.img = true
                })
        },
        submmit(){
            if(this.dialogTitle == '编辑广告'){
                new Promise((resolve,reject) =>{
                    update(this.form).then(res => {
                        this.dialogVisible = false
                        resolve()
                    })
                }).then(res => {
                    this.data()
                })
            
            }else{
                new Promise((resolve,reject) =>{
                    add(this.form).then(res => {
                        this.dialogVisible = false
                        resolve()
                    })  
                }).then(res => {
                    this.data()
                })
            }
        },
        remove(id){
            new Promise((resolve,reject) =>{
                del(id).then(res => {
                    resolve()
                })  
            }).then(res => {
                this.$message('删除成功')
                this.data()
            })   
        },
        handleSizeChange(val,e) {
            this.size = val;
            this.data()
        },
    }
}
</script>
<style>
    .text {
    font-size: 14px;
    }
    .item {
    margin-bottom: 18px;
    }
    .clearfix:before,
    .clearfix:after {
    display: table;
    content: "";
    }
    .clearfix:after {
    clear: both
    }
    .box-card {
    margin: 0 auto;
    }
    .ad-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    }
    .ad-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .ad-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .ad {
        width: 178px;
        height: 178px;
        display: block;
    }
    .url {
        width: 50px;
        height: 50px;
        display: block;
        margin: 0 auto;
    }
</style>